<template>
  <div class="record-wrapper">
    <Modal
      title="线下打款记录"
      width="960"
      footer-hide
      :value="value"
      :mask-closable="false"
      @on-cancel="handleCancel"
    >
      <Table
        style="margin-bottom: 15px;"
        border
        :columns="columns"
        :data="result.list"
        :loading="loading"
      >
      </Table>
      <Page
        :total="result.size"
        :current.sync="page"
        :page-size-opts="[10, 20, 40, 80, 100]"
        show-total
        show-elevator
        show-sizer
        @on-change="handleCurrentChange"
        @on-page-size-change="handleSizeChange"
      ></Page>
    </Modal>
  </div>
</template>

<script>
  import { dateFormat } from '@/static/tools'; 
  export default {
    name: 'offlineRecord',
    props: {
      value: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        page: 1,
        pageSize: 10,
        columns: [
          { 
            title: '提交时间',
            key: 'ctime',
            align: 'center',
            render: (h, params) => {
              return h('span', dateFormat(params.row.ctime, 'year'));
            }
          },
          { title: '操作账户', key: 'managerName', align: 'center' },
          { 
            title: '打款金额（元）',
            key: 'orderAmount',
            align: 'center'
          },
          { title: '支付银行账户名', key: 'payerCardName', align: 'center' },
          { title: '支付银行账户号', key: 'payerCardNo', align: 'center' },
          { title: '收款银行账户号 ', key: 'receiveCardNo', align: 'center' },
          { title: '收款日期 ', key: 'receiveDate', align: 'center' },
        ],
        result: {
          list: [],
          size: 0
        },
        loading: true
      }
    },
    watch: {
      value (newVal) {
        if (newVal) {
          this.getOfflineRecordList();
        }
      }
    },
    methods: {
      // 获取线下打款记录
      getOfflineRecordList () {
        this.loading = true;
        this.$http.post('/helsinki/admin/finance/getOfflineRechargeRecord', {
          page: this.page,
          pageSize: this.pageSize
        })
        .then(({ data: { errcode, info, data } }) => {
          if (errcode == 0) {
            this.result = data;
          } else {
            this.$Message.info(info);
          }
          this.loading = false;
        }, err => {
          this.loading = false;
        });
      },
      // 弹窗取消
      handleCancel () {
        this.page = 1;
        this.$emit('input', false);
      },
      // 页码改变的回调，返回改变后的页码
      handleCurrentChange (val) {
        this.page = val;
        this.getOfflineRecordList();
      },
      // 切换每页条数时的回调，返回切换后的每页条数
      handleSizeChange (val) {
        this.pageSize = val;
        this.getOfflineRecordList();
      }
    }
  }
</script>

<style lang="scss" scoped>
  .ivu-page {
    margin-top: 12px;
    text-align: right;
  }
</style>
